<template>
  <view>
    <!-- 商品列表外部包裹容器-->
    <view class="goods-list">
      <!-- 循环渲染每个item项 整个可点击 block不支持@click 自身可点击-->
      <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)">
        <!--调用my-goods组件动态绑定item -->
        <my-goods :goods="item"></my-goods>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
               //定义请求参数对象
              queryObj: {
              //搜索关键词属性
              query: '',
              //分类页面id属性
              cid: '',
              //页码值 默认请求第一页数据
              pagenum: 1,
              //每页显示10条数据
              pagesize: 10
              },
               //定义商品列表的数据
              goodsList: [],
              //定义存储的查找商品总数量
              total: 0,
				      //为避免下滑时频繁发起数据请求  设置节流阀 false将无法获取数据
              //比如想要请求第2页数据 后续数据请求都不应该再发起
              isloading: false
			};
		},
    onLoad(options) {
      //将页面参数转存到 this.queryObj 对象中
        this.queryObj.query = options.query || ''
        this.queryObj.cid = options.cid || ''
        // 调用获取商品列表数据的方法
          this.getGoodsList()
    },
    methods: {
        //获取商品列表数据的方法  接收cb回调函数  按需调用
        async getGoodsList(cb) {
          //发起请求 先打开节流阀 获取数据
          this.isloading = true
          const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
          //请求完毕 关闭节流阀 终止获取新数据
          this.isloading = false
          //只要数据请求完毕 就立即按需调用 cb 回调函数
          cb && cb()
          //失败
          if (res.meta.status !== 200) return uni.$showMsg()
          //成功则 data数据赋值    实现新旧数据拼接
          this.goodsList = [...this.goodsList, ...res.message.goods]
          this.total = res.message.total
        },
        //点击跳转商品详情页面
        gotoDetail(item) {
          uni.navigateTo({
            url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
          })
        }
    },
    //声明触底事件
    //当前的页码值 * 每页显示多少条数据 >= 总数条数
    //pagenum * pagesize >= total   则证明没有下一页数据
    onReachBottom() {
      //判断是否还有下一页数据
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
      //判断节流阀是否关闭 关闭状态则执行触底事件 打开则直接退出
      if(this.isloading) return
      //页码值+1
      this.queryObj.pagenum += 1
      //重新获取列表数据
      this.getGoodsList()
    },
    //触发下拉列表刷新事件
    onPullDownRefresh() {
      //重置关键数据
      this.queryObj.pagenum = 1
      this.total = 0
      this.isloading = false
      this.goodsList = []
      //重新发起请求获取数据 并终止下拉刷新事件
      this.getGoodsList(() => uni.stopPullDownRefresh())
    }
	}
</script>

<style lang="scss">
  
</style>
